@extends('admin.common.main')
   
@section('cnt')
<meta name="csrf-token" content="{{ csrf_token() }}"> 
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">文章管理</a>
            <a><cite>文章列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form action="#" method="get" class="layui-form layui-col-md12 x-so" onsubmit="return dopost()">
                <input class="layui-input" placeholder="开始日" name="datemin" id="datemin">
                <input class="layui-input" placeholder="截止日" name="datemax" id="datemax">
                <input type="text" name="title" placeholder="文章标题" autocomplete="off" class="layui-input" value="" id="title">
                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            </form>
        </div>
        <xblock>
            <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
            <a href="{{ route('admin.article.create') }}" class="layui-btn">添加文章</a>
            <span class="x-right" style="line-height:40px">共有数据：88 条</span>
        </xblock>
        <table class="layui-table" id="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>文章标题</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            {{-- <tbody> --}}
                {{-- @foreach($data as $item)
                <tr>
                    <td>
                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{ $item['id'] }}'><i class="layui-icon">&#xe605;</i></div>
                    </td>
                    <td>{{ $item['id'] }}</td>
                    <td>{{ $item['title'] }}</td>
                    <td>{{ $item['created_at'] }}</td>
                    <td class="td-manage">
                         <a title="编辑" onclick="x_admin_show('编辑','{{ route("admin.node.edit",['id'=>$item['id']]) }}')" href="javascript:;">
                                <i class="layui-icon">修改</i>
                            </a>
                        <a title="删除" class="del" onclick="member_del(this,'{{ route("admin.node.destroy",["id"=>$item['id']]) }}','delete')" href="javascript:;">
                            删除
                        </a>
                    </td>
                </tr>
                @endforeach --}}
            {{-- </tbody> --}}
        </table>
    </div>
@endsection

@section('js')
<script>
layui.use('laydate', function(){
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
        elem: '#datemin' //指定元素
    });

//执行一个laydate实例
    laydate.render({
        elem: '#datemax' //指定元素
    });
});
    //3：
 //初始化表格  []  

   
var dataTable = $('#myTable').DataTable({
    //下接的分页数量
    lengthMenu:[5,10,15,20,100],
    columnDefs:[
        //索引第三列，不进行排序
        {target:[4],orderable:false}
    ],
    //开启服务端分页 开启ajax
    serverSide:true,
    //关闭前端搜索
    searching:false,
    //进行ajax请求
    ajax:{
        //请求地址
        url: '{{ route('admin.article.index') }}',
        //请求方式
        type:'get',
        //参数 动态获取表单数据用 function
        data:function(ret){
            //获取开始值
            ret.datemin = $("#datemin").val();
            //获取结束值
            ret.datemax = $("#datemax").val();
            //获取标题值
            ret.title   = $("#title").val();
        }
    },
    //指定每一列的数据
    columns:[
        {data:'id',className:'text-c'},
        {data:'title'},
        {data:'created_at'},
        {data:'aa',defaultContent:'默认值'}
    ],
    //回调方法
    //row 当前行的dom对象
    //data 当前行的数据
    //dataIndex 当前行的数据索引
    createdRow:function(row,data,dataIndex){
        //当前id
        var id = data.id
        //行的最后一列
        var td = $(row).find('td:last-child');
        //显示的html内容
        var html = `
             <a title="编辑" href="/admin/article/${id}/edit">编辑</a>
             <a href="/admin/article/${id}" onclick="return delArticle(this)">删除</a>
        `;
        td.html(html);
    }
});   


//表单提交
function dopost(){
    //手动调用dataTable插件请求
    dataTable.ajax.reload();
    //取消表单默认行为
    return false;
}

//删除文章
// async await promise  异步变同步
// async function delArticle(evt,obj){
//      evt.preventDefault();
//         // 请求的URL地址
//         let url = $(obj).attr('href');
//         const _token = "{{ csrf_token() }}";
//         // 发起ajax
//         // 原生的，浏览自带
//         let ret = await fetch(url, {
//           method: 'DELETE',
//           headers: {
//               'X-CSRF-TOKEN': _token
//           }
//         });
//         let json = await ret.json();
//         console.log(json);
//         // 取消默认行为
//         return false;
   
// }

    function delArticle(obj){
        var url = $(obj).attr('href');
        const _token = "{{ csrf_token() }}";
        $.ajax({
            url,
            type:'DELETE',
            data:{
                _token
            },
            dataType:'json'
        }).then(({status,msg})=>{
            if (status == 0) {
            layer.msg(msg, {
                icon: 1,
                time: 1000
            }, () => {
                history.go(0);
            });
        }
        });
        return false;
    }
</script>
@endsection